<template>
<el-main>
        <div class="block">

          <el-row :gutter="0" type="flex"  class="row-bg" justify="center"  height="160px" >
                    <el-col :span="24"
                     ><div class="menu1"> 云  艺</div></el-col
                    >
          </el-row>
          <el-row :gutter="0" type="flex"  class="row-bg" justify="center"  height="100px" >  
                    <el-col :span="24"
                     ><div class="menu2 ">国 内 最 酷 的 NFT 交 易 平 台</div></el-col
                    >
          </el-row>
          
          <el-row>
             <button class="button" >搜  索</button>
             <button class="button" style="margin-left:60px;" @click="turntocreate()">快速创建</button>
          </el-row>
        

          <el-carousel indicator-position="none" height="400px">
            <el-carousel-item v-for="item in imgs" :key="item">
              <h3 class="blockpic">
                <img :src="item.src" />
              </h3>
            </el-carousel-item>
          </el-carousel>

        </div>
        
        <div class="module1">
           <el-row :gutter="0" class="row-bg" justify="center" height="100px">
              <el-col :span="24"
               ><div class="menu ">新 手 教 程</div></el-col
              >
           </el-row>

           
            <div class="products">  
            <div v-for="pro1 in pros1" class="product1" :key="pro1" @click="gtproinfo(pro1.padd)">
             <img :src="pro1.pimg" height="150px" width="150px" /> 
             <br />
             <p class="tag">{{ pro1.pname }}</p>
             <p class="intro">{{ pro1.pintro }}</p>
            </div></div>


            <el-row :gutter="0" type="flex" class="row-bg" justify="center"  height="100px" >
              <el-col :span="24"
               ><div class="menu ">分 类 标 签</div></el-col
              >
            </el-row>

           
           <div class="products">  
            <div v-for="pro2 in pros2" class="product2" :key="pro2">
             <el-col :span="16" >
                <img :src="pro2.pimg" height="150px" width="150px" /> 
              </el-col>
              <el-col :span="8">
                <p class="tag">{{ pro2.pname }}</p>
                <p class="intro">{{ pro2.pintro}}</p>
              </el-col>
            </div></div>
           
           <div class="products">  
            <div v-for="pro3 in pros3" class="product2" :key="pro3">
              <el-col :span="16">
                <img :src="pro3.pimg" height="150px" width="150px" /> 
              </el-col>
              <el-col :span="8">
                <p class="tag">{{ pro3.pname }}</p>
                <p class="intro">{{ pro3.pintro}}</p>
              </el-col>
            
            </div></div>

        </div>

    </el-main>
</template>

<script>
export default {
  name: "Mall",
  data() {
    return {
      imgs: [
        { src: require("@/assets/G1.jpg") },
        { src: require("@/assets/G2.jpg") },
      ],

      pros1: [
        {
          pname: "创建账号",
          pintro: " 创建平台账号，提交身份资料，进行身份认证，目前平台提供个人身份及企业身份认证。",
          pimg: require("@/assets/P1.png"),
          padd: '/register'
        },
        {
          pname: "购买数字艺术品",
          pintro: " 登录平台账号后，进入商城页面，选择感兴趣的商品，加入购物车，也可立即购买。",
          pimg: require("@/assets/P2.png"),
          padd: '/shop'
        },
        {
          pname: "发布数字艺术品",
          pintro: " 登录平台账号后，进入创作中心，上传作品，目前平台支持图片、视频、音频等文件上传。",
          pimg: require("@/assets/P3.png"),
          padd: '/create_center'
        },
      ],
       
      pros2: [
        {
          pname: "图片",
          pintro: "插画作品，头像，素材等",
          pimg: require("@/assets/L1.png"),
        },
        {
          pname: "音频",
          pintro: "古典，流行，摇滚，轻音乐等",
          pimg: require("@/assets/L2.png"),
        },
        {
          pname: "视频",
          pintro: "旅游、美食、时尚、动漫等",
          pimg: require("@/assets/L3.png"),
        },
      ],

      pros3: [
        {
          pname: "游戏",
          pintro: "游戏装备，游戏皮肤，珍藏版设备等",
          pimg: require("@/assets/L4.png"),
        },
        {
          pname: "文本",
          pintro: "小说，古今中外文学作品等",
          pimg: require("@/assets/L5.png"),
        },
        {
          pname: "其他",
          pintro: "加密版权，现实版权，数字门票等",
          pimg: require("@/assets/L6.png"),
        },
      ],

    };
  },
   methods:{
    gtproinfo(padd){
      this.$router.push(padd)
    },
    turntocreate: function(){
            this.$router.replace('/create_center');
        }
  }
};
</script>

<style scoped>

.menu1 {
  margin-top: 30px;
  margin-bottom: 5px;
  margin-left: 50px;
  margin-right: 60px;
  text-align: center;
  white-space: nowrap;
  line-height: 100px;
  font-family:"PingFang SC" ;
  font-size: 60px;
  background-color: "transparent";
}
.menu2 {
  margin-top: 10px;
  margin-bottom: 30px;
  margin-left: 50px;
  margin-right: 60px;
  text-align: center;
  white-space: nowrap;
  line-height: 40px;
  font-family:"Hiragino Sans GB" ;
  font-size: 40px;
  background-color: "transparent";
}
.tag{
  font-size: 16px;
  font-weight: 600;
}
.intro{
  font-size: 14px;
  text-align: left;
}
.blockpic{
  height:100%;
  width:auto;
  object-fit:contain;
}
.products{
   display: flex;
   margin: 0px 20px 0px 20px;
   flex-wrap: wrap;
   justify-content: space-around;
   
}
.product2{
  height: 160px;
  width: 270px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 5px;
  padding: 20px 20px 5px 20px;
  border:#333 ;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}
.product1{
  width: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 5px;
  padding: 20px 20px 5px 20px;
  border:#333 ;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
}
.menu {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  margin-right: 60px;
  text-align: center;
  white-space: nowrap;
  line-height: 40px;
  font-family:"PingFang SC" ;
  font-size: 25px;
  background-color: "transparent";
  font-weight: 600;
}
.pagination{
  margin-top: 40px;
  margin-bottom: 20px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  /*line-height: 360px;*/
  
  padding: 0px 0px 10px 0px;
  position: relative;
  margin-top: 30px;
  
}
.grid-content {
  border-radius: 4px;
  min-height: 36px; 
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
  font-weight: 500;
}
.button{
    position: relative;
    background-color: rgb(255, 227, 0); /* Green */
    color: rgb(54, 54, 54);
    border: none;
    width: 100px;
    height: 42px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    border-radius: 2px;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
}

</style>